<% if (locals.siteData?.banner?.content) { %>
    <div class="w-full bg-blue-50 <%= darkClasses('dark:bg-blue-900/20') %>" data-banner>
        <div class="max-w-screen-xl px-6 py-3 mx-auto flex items-center justify-between">
            <div class="text-blue-700 <%= darkClasses('dark:text-blue-300') %>">
                <%- locals.siteData.banner.content %>
            </div>
            <button class="text-blue-500 hover:text-blue-700 <%= darkClasses('dark:text-blue-400 dark:hover:text-blue-200') %>"
                    data-banner-close>
                <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/>
                </svg>
            </button>
        </div>
    </div>
<% } %>